<template>
  <div class="createGroup">
    <el-form>
      <el-form-item
        label="群名称"
        prop="name"
      >
        <el-input
          placeholder="请输入群名称"
          v-model="form.name"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="群头像"
        prop="avater"
      >
        <ul class="imglist">
          <li
            v-for="index in (0,11)"
            @click="changeAvatar(index)"
            :key="index"
          >
            <img
              :src="require(`../../../../../../assets/group${index}.png`)"
              alt=""
              :class="{'activeImg':index === checkedAvatar.index}"
            >
          </li>
        </ul>
      </el-form-item>
      <el-form-item
        label="群简介"
        prop="info"
      >
        <el-input
          type="textarea"
          placeholder="请输入群简介"
          v-model="form.info"
        ></el-input>
      </el-form-item>
      <div class="btns">
        <el-button
          type="primary"
          @click="createRoom"
        >创建</el-button>
        <el-button>取消</el-button>
      </div>
    </el-form>
  </div>
</template>
 
 <script>
import { createRoomAPI } from "../../../../../../api/socket";
export default {
  data() {
    return {
      checkedAvatar: { index: 1 },
      form: {
        name: "",
        info: "",
        avatar: "",
        author_name: this.$store.state.users.userInfo.username,
      },
      avatar: "", //链接或646字符串
      preavatar: "",
      filename: "",
      file: "",
    };
  },
  methods: {
    changeAvatar(index) {
      console.log(index);
      this.checkedAvatar.index = index;
      this.selectAvatar(index);
    },
    // 选择图片
    selectAvatar(index) {
      // 创建一个 Image 对象
      const img = new Image();
      img.onload = () => {
        // 创建一个 Canvas 元素
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        // 设置 Canvas 的大小与图片大小一致
        canvas.width = img.width;
        canvas.height = img.height;
        // 在 Canvas 上绘制 SVG 图片
        ctx.drawImage(img, 0, 0);
        // 将 Canvas 中的内容转换为 PNG 格式的 Base64 字符串
        const base64Data = canvas.toDataURL("image/png");
        // this.avatar = base64Data;
        // this.form.user_pic = base64Data;
        // this.preavatar = base64Data;
        this.compressImage2(base64Data);

        // 将 Base64 数据发送到后端保存
      };
      // 设置 Image 对象的 src 属性为 SVG 图片的路径，开始加载 SVG 图片
      img.src = require(`../../../../../../assets/group${index}.png`);
    },
    compressImage2: function (base64data) {
      var _this = this;
      var maxWidth = 800; // 设置最大宽度
      var maxHeight = 600; // 设置最大高度
      var quality = 0.75; // 设置压缩质量

      var img = new Image();

      img.onload = function () {
        var width = img.width;
        var height = img.height;

        // 计算压缩后的尺寸
        if (width > height) {
          if (width > maxWidth) {
            height *= maxWidth / width;
            width = maxWidth;
          }
        } else {
          if (height > maxHeight) {
            width *= maxHeight / height;
            height = maxHeight;
          }
        }

        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);

        // 将 Canvas 数据转换为 Base64 字符串
        var compressedData = canvas.toDataURL("image/jpeg", quality);

        // 设置预览图
        _this.preavatar = compressedData;
        _this.avatar = base64data;

        // 设置表单数据
        _this.form.avatar = compressedData;
      };

      img.src = base64data;
    },

    async createRoom() {
      const res = await createRoomAPI(this.form);
      if (res.status == 0) {
        this.$store.dispatch("getMyRoomList");
        this.form.name = "";
        this.form.info = "";
        this.form.avatar = "";
        this.checkedAvatar.index = 0;
        this.$message.success("创建成功！");
      }
    },
  },
};
</script>
<style scoped lang='less'>
.createGroup {
  padding: 20px;

  .imglist {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    li {
      padding: 5px 5px;

      img {
        width: 50px;
        padding: 1px;
        cursor: pointer;
        opacity: 0.3;
      }
    }

    .activeImg {
      transition: 0.1s;
      opacity: 1;
      box-shadow: 0 0 1px 2px #ffcd61;
    }
  }

  .btns {
    margin-top: 40px;
    text-align: end;
  }
}
</style>